<template>
  <div style="padding: 50px 100px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="聊天截图">
        <el-upload
          :on-remove="onremove"
          :on-success="onsuccess"
          :data="content"
          :headers="headers"
          ref="upload"
          :file-list="fileList2"
          action="/api/systemfile"
          list-type="picture-card"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete">
                <i class="el-icon-download"></i>
              </span>
              <span
                @click="staticdelete(file)"
                class="el-upload-list__item-delete"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="设计附件">
        <el-upload
          :on-success="onsuccess2"
          ref="upload2"
          :data="content2"
          :headers="headers"
          :on-remove="onremove"
          class="upload-demo"
          action="/api/systemfile"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { myselffile, myselfdeteltfile, myselstatus } from '../../../api/order';
export default {
  props: {
    orderid: {
      require: true,
    },
  },
  data() {
    return {
      fileList2: [],
      fileList: [],
      content: {
        orderid: 1,
        type: 0,
      },
      content2: {
        type: 1,
        orderid: 1,
      },
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      form: {
        chatlist: [],
        files: [],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      },
    };
  },
  async created() {
    this.content.orderid = this.orderid;
    this.content2.orderid = this.orderid;
    let result = await myselffile({
      orderid: this.orderid,
    });
    //   '文件数据',
    //   result.data.filter((v) => v.type == 1)
    // );

    this.fileList = result.data
      .filter((v) => v.type == 1)
      .map((v) => ({ id: v.id, name: v.name, url: v.link }));
    this.fileList2 = result.data
      .filter((v) => v.type == 0)
      .map((v) => ({ id: v.id, name: v.name, url: v.link }));
  },
  methods: {
    async onremove(val) {
      var id = val.id || val.response.data.id;
      await myselfdeteltfile({ id: id });
    },

    async staticdelete(val) {
      var id = val.id || val.response.data.id;
      let result = await myselfdeteltfile({ id: id });
      this.fileList2 = this.fileList2.filter((v) => v.id != val.id);
    },

    onsuccess(val) {
      this.fileList2.push({ id: val.data.id, url: val.data.url });
    },
    onsuccess2(val) {},
    async onSubmit() {
      if (this.fileList.length == 0 && this.fileList2.length == 0) {
        alert('请提交文件');
        return;
      }
      let result = await myselstatus({
        orderid: this.orderid,
        status: 2,
      });
      this.$emit('chose');
      // this.$refs.upload.submit();
      // this.$refs.upload2.submit();
    },
    handleRemove(file) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {},
  },
};
</script>

<style lang="scss" scoped></style>
